<template>
	<view >
		<view style="padding: 10px;">
			<u-form>
				<u-form-item label="日期:"  border-bottom="false" label-width="150" >
					<u-input v-model="formData.time" @click="show=!show" disabled="true" border="true"  />
				</u-form-item>
				<u-form-item label="警务助理:"  border-bottom="false" label-width="150" >
					<zhilin-picker v-model="jwzlPickerShow" :datalist="filterJwzls"
					@confirm="jwzlSelect" :showSearch="true"></zhilin-picker>
					<u-input v-model="jwzlNames" @click="jwzlPickerShow=!jwzlPickerShow" :disabled="true" placeholder="请选择警务助理"/>
					<u-icon class="arrowIcon" :name="arrowName" :class="[jwzlPickerShow ? 'arrowIconRotateRight' : 'arrowIconRotateDown']"></u-icon>
				</u-form-item>
				<u-form-item label="结果:"  border-bottom="false" label-width="150"  >
					<!-- <u-input v-model="result.label" type="select" :select-open="show" @click="show=true"/> --> 
					<picker @change="bindPickerChange" @cancel="cancelPicker" :value="value" range-key="label" :range="options.results" @click="pickerShow = !pickerShow">
					        <view class="uni-input">{{options.results[index].label}}</view>
					</picker>
					<u-icon class="arrowIcon" :name="arrowName" :class="[pickerShow ? 'arrowIconRotateRight' : 'arrowIconRotateDown']"></u-icon>
				</u-form-item>
				
				<u-form-item label="备注:"  border-bottom="false"  label-width="150" >
					<u-input v-model="formData.mark" />
				</u-form-item>
			</u-form>
			<u-button @click="save()" :disabled="submitBtn" type="primary">保存</u-button>
		</view>
		<u-calendar v-model="show" :mode="mode" @change="changeDate"></u-calendar>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import zhilinPicker from "@/components/zhilin-picker/zhilin-picker.vue"
	export default {
		name:"sqmjpjAdd",
		computed:mapState(['user', ]),
		components:{zhilinPicker},
		
		data() {
			return {
				jwzlIds:[],
				jwzlNames:'',
				jwzlPickerShow:false,
				submitBtn:false,
				index: 0,		//评价结果选择器默认显示第一个
				show: false,	//控制日期选择器显示
				mode: 'date',
				pickerShow:false,
				arrowName:'arrow-down',
				formData:{
					time: this.$util.getNowD(),
					jwzls: [],
					result: '',
					mark: '',
					plr: ''
				},
				filterJwzls: [],
				options: {
					jwzls: [],
					results: [{
							value: '1',
							label: '优秀'
						},
						{
							value: '2',
							label: '称职'
						},
						{
							value: '3',
							label: '基本称职'
						},
						{
							value: '4',
							label: '不称职'
						}],
					
				},
			}
		},
		methods:{
			jwzlSelect(value){
				let ids = value.split(",");
				this.formData.jwzls = [];
				this.jwzlNames = '';
				let jwzls = [];
				let list = [];
				this.formData.jwzls = ids;
				for(let id of ids){
					list.push(this.options.jwzls.filter( jwzl => jwzl.value === parseInt(id))[0]);
				}
				for(let item of list){
					//this.formData.jwzls.push(JSON.stringify(item.value));
					jwzls.push(item.label);
				}
				
				this.jwzlNames = jwzls.join(",");
			},
			cancelPicker(){
				this.pickerShow = false;
			},
			bindPickerChange: function(e) {
				this.pickerShow = false;
			    this.index = e.target.value;
				this.formData.result = this.getResult(this.index);
			},
			getResult(index){
				return this.options.results[index].value;
			},
			changeDate(e){
				this.formData.time  = e.result;
			},
			save(){
				if(this.formData.jwzls.length<1){
					this.$refs.uToast.show({
						title: '未选择警务助理',
						type: 'error'
					})
					return;
				}
				var that = this;
				this.submitBtn = true;
				this.formData.plr = this.user.user.id || '';
				this.$http.post('/sqmjpj/save',this.formData).then(res=>{
					let data = res.data.data;
					if(data){
						console.log(data);
						this.$refs.uToast.show({
							title: '提交成功',
							type: 'success',
							callback:() => {
								let pages = getCurrentPages(); // 当前页面
								let prePage = pages[pages.length - 2]; // 前一个页面
								uni.navigateBack({
								     success: function() {
										
										prePage.onLoad(); // 执行前一个页面的onLoad方法
										 
								     }
								});
							}
						})
					}else{
						that.submitBtn = false;
						this.$refs.uToast.show({
							title: '提交失败',
							type: 'error'
						})
					}
				}).catch(err => {
					that.submitBtn = false;
					this.$refs.uToast.show({
						title: '请求失败！',
						type: 'error'
					}) 
				})
			},
			filterJwzl(){
				
				if(this.jwzlIds!=undefined&&this.jwzlIds.length>0){
					console.log(this.jwzlIds);
					this.filterJwzls = this.options.jwzls.filter(jwzl => this.jwzlIds.indexOf(jwzl.value+'')==-1);
				}else{
					this.filterJwzls = this.options.jwzls;
				}
			}
		},
		mounted() {
			this.formData.result = this.getResult(this.index);
			//this.options.jwzls = this.user.jwzls;
			let jwzls = this.user.jwzls.concat();
			this.options.jwzls = jwzls;
			this.options.jwzls.shift();
			this.filterJwzl();
		},
		onLoad(options) {
			this.jwzlIds = options.jwzlIds.split(",") || [];
			this.formData.time = options.time;
		}
		
	}
</script>

<style scoped>
	.arrowIcon{
		position: absolute;
		right: 10rpx;
		top: 50rpx;
	}
	
	.arrowIconRotateRight{
		transition: all .5s ease 0s;
		transform: rotate(-180deg);
	}
	
	.arrowIconRotateDown{
		transition: all .5s ease 0s;
		transform: rotate(0deg);
	}

</style>
